[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "@/styles/globals.css" import type { Metadata } from "next" import { ThemeProvider } from "@/components/theme-provider" import { Inter, DM_Sans as V0_Font_DM_Sans, Space_Mono as V0_Font_Space_Mono, Source_Serif_4 as V0_Font_Source_Serif_4 } from 'next/font/google' // Initialize fonts const _dmSans = V0_Font_DM_Sans({ subsets: ['latin'], weight: ["100","200","300","400","500","600","700","800","900","1000"], variable: '--v0-font-dm-sans' }) const _spaceMono = V0_Font_Space_Mono({ subsets: ['latin'], weight: ["400","700"], variable: '--v0-font-space-mono' }) const _sourceSerif_4 = V0_Font_Source_Serif_4({ subsets: ['latin'], weight: ["200","300","400","500","600","700","800","900"], variable: '--v0-font-source-serif-4' }) const _v0_fontVariables = `${_dmSans.variable} ${_spaceMono.variable} ${_sourceSerif_4.variable}` const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "SaaSify - Streamline Your Workflow", description: "Boost productivity, reduce costs, and scale your business with our all-in-one SaaS platform.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "saas-landing-page", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-tabs": "^1.0.4", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "framer-motion": "^10.16.4", "lucide-react": "^0.292.0", "next": "14.0.3", "next-themes": "^0.2.1", "react": "^18", "react-dom": "^18", "tailwind-merge": "^2.0.0", "tw-animate": "^2.1.1", "tailwindcss-animate": "1.0.7" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.3", "postcss": "^8", "tailwindcss": "^4.0.0", "typescript": "^5" } } [V0_FILE]css:file="styles/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @custom-variant dark (&:is(.dark *)); /* Tailwind v4: Semantic design tokens - moved outside @layer base */ :root { --background: #ffffff; --foreground: #000000; --card: #ffffff; --card-foreground: #000000; --popover: #ffffff; --popover-foreground: #000000; --primary: #ff3333; --primary-foreground: #ffffff; --secondary: #ffff00; --secondary-foreground: #000000; --muted: #f0f0f0; --muted-foreground: #333333; --accent: #0066ff; --accent-foreground: #ffffff; --destructive: #000000; --destructive-foreground: #ffffff; --border: #000000; --input: #000000; --ring: #ff3333; --radius: 0px; --chart-1: #ff3333; --chart-2: #ffff00; --chart-3: #0066ff; --chart-4: #00cc00; --chart-5: #cc00cc; --sidebar: #f0f0f0; --sidebar-foreground: #000000; --sidebar-primary: #ff3333; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #0066ff; --sidebar-accent-foreground: #ffffff; --sidebar-border: #000000; --sidebar-ring: #ff3333; --shadow-x: 4px; --shadow-y: 4px; --shadow-blur: 0px; --shadow-spread: 0px; --shadow-opacity: 1; --shadow-color: #000000; } .dark { --background: #000000; --foreground: #ffffff; --card: #333333; --card-foreground: #ffffff; --popover: #333333; --popover-foreground: #ffffff; --primary: #ff6666; --primary-foreground: #000000; --secondary: #ffff33; --secondary-foreground: #000000; --muted: #333333; --muted-foreground: #cccccc; --accent: #3399ff; --accent-foreground: #000000; --destructive: #ffffff; --destructive-foreground: #000000; --border: #ffffff; --input: #ffffff; --ring: #ff6666; --chart-1: #ff6666; --chart-2: #ffff33; --chart-3: #3399ff; --chart-4: #33cc33; --chart-5: #cc33cc; --sidebar: #000000; --sidebar-foreground: #ffffff; --sidebar-primary: #ff6666; --sidebar-primary-foreground: #000000; --sidebar-accent: #3399ff; --sidebar-accent-foreground: #000000; --sidebar-border: #ffffff; --sidebar-ring: #ff6666; --shadow-x: 4px; --shadow-y: 4px; --shadow-blur: 0px; --shadow-spread: 0px; --shadow-opacity: 1; --shadow-color: #000000; } /* Tailwind v4: @theme block for semantic color tokens */ @theme { --color-border: hsl(var(--border)); --color-input: hsl(var(--input)); --color-ring: hsl(var(--ring)); --color-background: hsl(var(--background)); --color-foreground: hsl(var(--foreground)); --color-primary: hsl(var(--primary)); --color-primary-foreground: hsl(var(--primary-foreground)); --color-secondary: hsl(var(--secondary)); --color-secondary-foreground: hsl(var(--secondary-foreground)); --color-destructive: hsl(var(--destructive)); --color-destructive-foreground: hsl(var(--destructive-foreground)); --color-muted: hsl(var(--muted)); --color-muted-foreground: hsl(var(--muted-foreground)); --color-accent: hsl(var(--accent)); --color-accent-foreground: hsl(var(--accent-foreground)); --color-popover: hsl(var(--popover)); --color-popover-foreground: hsl(var(--popover-foreground)); --color-card: hsl(var(--card)); --color-card-foreground: hsl(var(--card-foreground)); --radius: var(--radius); } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } } /* Updated animation keyframes for Tailwind v4 */ @keyframes animate-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } } @keyframes accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } } @theme inline { --font-sans: var(--v0-font-dm-sans); --font-mono: var(--v0-font-space-mono); --font-serif: var(--v0-font-source-serif-4); /* computed shadow variables below - do not modify */ --shadow-2xs: var(--shadow-x) var(--shadow-y) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-xs: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-sm: var(--shadow-x) var(--shadow-y) calc(var(--shadow-blur) * 1.5) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-md: calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(var(--shadow-blur) * 3) calc(var(--shadow-spread) - 1px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-lg: calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(var(--shadow-blur) * 5) calc(var(--shadow-spread) - 3px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-xl: calc(var(--shadow-x) * 6) calc(var(--shadow-y) * 6) calc(var(--shadow-blur) * 7) calc(var(--shadow-spread) - 5px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-2xl: calc(var(--shadow-x) * 8) calc(var(--shadow-y) * 8) calc(max(0px, var(--shadow-blur) * 9 - 8px)) calc(var(--shadow-spread) - 12px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 250%), transparent); --shadow: var(--shadow-md); --color-shadow-color: var(--shadow-color); --shadow-opacity: var(--shadow-opacity); --shadow-spread: var(--shadow-spread); --shadow-blur: var(--shadow-blur); --shadow-y: var(--shadow-y); --shadow-x: var(--shadow-x); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive-foreground: var(--destructive-foreground); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --color-foreground: var(--foreground); --color-background: var(--background); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]png:file="public/images/design-mode/original-fa372845e394ee85bebe0389b9d86871.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/original-fa372845e394ee85bebe0389b9d86871-vDKYfyKmZQMrTiicveG4dQwe2IUlVR.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import Image from "next/image" import { motion } from "framer-motion" import { Check, ChevronRight, Menu, X, Moon, Sun, ArrowRight, Star, Zap, Shield, Users, TrendingUp, Brain, BarChart3, LineChartIcon, PieChartIcon } from 'lucide-react' import { Button } from "@/components/ui/button" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useTheme } from "next-themes" export default function LandingPage() { const [isScrolled, setIsScrolled] = useState(false) const [mobileMenuOpen, setMobileMenuOpen] = useState(false) const { theme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) const handleScroll = () => { if (window.scrollY > 10) { setIsScrolled(true) } else { setIsScrolled(false) } } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const toggleTheme = () => { setTheme(theme === "dark" ? "light" : "dark") } const container = { hidden: { opacity: 0 }, show: { opacity: 1, transition: { staggerChildren: 0.1, }, }, } const item = { hidden: { opacity: 0, y: 20 }, show: { opacity: 1, y: 0 }, } const features = [ { title: "AI-Powered Analysis", description: "Machine learning algorithms analyze market trends, stock patterns, and holdings to identify opportunities.", icon: , }, { title: "Real-Time Market Data", description: "Access live stock prices, market indicators, and portfolio performance metrics in real-time.", icon: , }, { title: "Intelligent Predictions", description: "Leverage advanced predictive models to forecast stock movements and optimize betting strategies.", icon: , }, { title: "Risk Management", description: "Built-in tools to manage risk exposure, set stop-losses, and protect your investment portfolio.", icon: , }, { title: "Portfolio Tracking", description: "Monitor all your holdings, track performance metrics, and analyze diversification across sectors.", icon: , }, { title: "24/7 Trading Support", description: "Get help whenever you need it with our dedicated trading support team and AI advisors.", icon: , }, ] const tradingMetrics = [ { title: "Market Overview", subtitle: "S&P 500 Index", icon: , value: "+2.48%", change: "Today", size: "md", }, { title: "Portfolio Performance", subtitle: "Your Holdings", icon: , value: "+18.5%", change: "This Month", size: "md", }, { title: "Sector Distribution", subtitle: "Diversification", icon: , value: "8", change: "Sectors", size: "sm", }, { title: "Top Recommendation", subtitle: "TSLA", icon: , value: "+12.3%", change: "Upside Potential", size: "sm", }, { title: "Risk Score", subtitle: "Portfolio Health", icon: , value: "Low", change: "Well Managed", size: "lg", }, ] return (

{/* Animated gradient orbs */}

AI Trader

{/* Mobile menu */} {mobileMenuOpen && (

setMobileMenuOpen(false)}> Features setMobileMenuOpen(false)}> Analytics setMobileMenuOpen(false)}> Testimonials setMobileMenuOpen(false)}> Pricing setMobileMenuOpen(false)}> FAQ

setMobileMenuOpen(false)}> Log in

)}

{/* Hero Section */}

Launching Soon

Smart Stock Trading Powered by AI

AI Trader analyzes market trends, stocks, and your holdings to make intelligent trading decisions. Let artificial intelligence work for you while you grow your wealth.

No credit card

14-day free trial

Cancel anytime

{/* Logos Section */}

Trusted by traders and investors worldwide

{[1, 2, 3, 4, 5].map((i) => (

))}

{/* Analytics Bento Grid Section */}

Trading Dashboard

Real-Time Market Analytics

Visualize your portfolio performance and market trends with our advanced analytics dashboard. Get instant insights into your trading opportunities.

{/* Large chart - Portfolio Performance */}

Portfolio Value

Your total assets

$247,852

+18.5% this month

{/* Market Overview */}

Market Index

S&P 500

4,892

+2.48%

{/* Win Rate */}

Win Rate

Success Rate

78%

{/* Holdings Overview */}

Top Holdings

{[ { symbol: "TSLA", pct: 28 }, { symbol: "AAPL", pct: 24 }, { symbol: "MSFT", pct: 18 }, ].map((stock, i) => (

{stock.symbol} {stock.pct}%

))}

{/* Risk Assessment */}

Risk Level

Portfolio Risk

Low

{[...Array(5)].map((_, i) => ( ))}

{/* Features Section */}

Features

Advanced AI Trading Features

Leverage cutting-edge artificial intelligence to analyze stocks, monitor holdings, and optimize your trading strategy with confidence and precision.

{features.map((feature, i) => (

{feature.icon}

{feature.title}

{feature.description}

))}

{/* How It Works Section */}

How It Works

Start Trading in Three Steps

Get started with AI Trader and begin making smarter trading decisions powered by machine learning.

{[ { step: "01", title: "Connect Your Account", description: "Link your brokerage account securely. AI Trader integrates with all major platforms.", }, { step: "02", title: "Set Your Strategy", description: "Define your risk tolerance and investment goals. Our AI will learn your preferences.", }, { step: "03", title: "Start Earning Returns", description: "Let AI analyze and trade automatically while you monitor your portfolio growth.", }, ].map((step, i) => (

{step.step}

{step.title}

{step.description}

))}

{/* Testimonials Section */}

Testimonials

Trusted by Successful Traders

See what experienced traders and investors say about their results with AI Trader.

{[ { quote: "AI Trader identified a 45% undervalued stock that tripled in six months. The analysis was spot-on and saved me hours of research.", author: "Michael Thompson", role: "Investment Portfolio Manager", rating: 5, }, { quote: "The real-time market analysis and predictive models have improved my trading accuracy by 60%. My returns have never been better.", author: "Jessica Lee", role: "Day Trader, NYC", rating: 5, }, { quote: "AI Trader's risk management tools protect my portfolio while maximizing gains. It's like having a personal trading advisor 24/7.", author: "David Kumar", role: "Hedge Fund Manager", rating: 5, }, { quote: "I've tried other trading platforms, but none compare to the intelligent insights and ease of use AI Trader provides. It's a game-changer.", author: "Sarah Martinez", role: "Retail Investor", rating: 5, }, { quote: "The AI analyzed my holdings and recommended a diversification strategy that reduced volatility by 35%. Highly recommended for serious traders.", author: "Robert Chen", role: "Wealth Advisor", rating: 5, }, { quote: "Since using AI Trader, I've turned a modest investment into a six-figure portfolio. The predictive accuracy is incredible and the support is exceptional.", author: "Amanda Foster", role: "Financial Analyst", rating: 5, }, ].map((testimonial, i) => (

{Array(testimonial.rating) .fill(0) .map((_, j) => ( ))}

{testimonial.quote}

{testimonial.author.charAt(0)}

{testimonial.author}

{testimonial.role}

))}

{/* Pricing Section */}

Pricing

Transparent Pricing for Traders

Choose the trading plan that fits your needs. All plans include a 14-day free trial with no credit card required.

Monthly Annually (Save 20%)

{[ { name: "Starter Trader", price: "$49", description: "Perfect for beginning traders.", features: ["Up to 5 watchlists", "Basic AI analysis", "Market alerts", "Email support"], cta: "Start Free Trial", }, { name: "Professional Trader", price: "$149", description: "Ideal for active traders.", features: [ "Unlimited watchlists", "Advanced AI predictions", "Real-time alerts", "Priority support", "API access", ], cta: "Start Free Trial", popular: true, }, { name: "Elite Trader", price: "$399", description: "For professional fund managers.", features: [ "Custom ML models", "Advanced portfolio analysis", "Automated trading", "24/7 phone support", "Premium API", "Dedicated advisor", ], cta: "Contact Sales", }, ].map((plan, i) => ( {plan.popular && (

{plan.name}

{plan.price} /month

{plan.description}

{feature}

))}

{[ { name: "Starter Trader", price: "$39", description: "Perfect for beginning traders.", features: ["Up to 5 watchlists", "Basic AI analysis", "Market alerts", "Email support"], cta: "Start Free Trial", }, { name: "Professional Trader", price: "$119", description: "Ideal for active traders.", features: [ "Unlimited watchlists", "Advanced AI predictions", "Real-time alerts", "Priority support", "API access", ], cta: "Start Free Trial", popular: true, }, { name: "Elite Trader", price: "$319", description: "For professional fund managers.", features: [ "Custom ML models", "Advanced portfolio analysis", "Automated trading", "24/7 phone support", "Premium API", "Dedicated advisor", ], cta: "Contact Sales", }, ].map((plan, i) => ( {plan.popular && (

{plan.name}

{plan.price} /month

{plan.description}

{feature}

))}

{/* FAQ Section */}

FAQ

Frequently Asked Questions

Find answers to common questions about AI Trader and how it can help you trade smarter.

{[ { question: "How does AI Trader analyze stocks?", answer: "AI Trader uses advanced machine learning algorithms that analyze historical price data, trading volume, market sentiment, news, and technical indicators to predict future stock movements and identify trading opportunities.", }, { question: "Can I trust the AI predictions?", answer: "Our AI has been trained on 15+ years of market data with a 78% accuracy rate on predictions. However, no trading system is 100% accurate. We recommend using AI Trader as one tool in your broader investment strategy.", }, { question: "How much capital do I need to start?", answer: "You can start with as little as $500. AI Trader works with any portfolio size, from beginner investors to professional fund managers. The platform scales with your capital.", }, { question: "Is my money invested automatically?", answer: "No. AI Trader provides recommendations and alerts, but you maintain full control over all trades. Elite Tier users can enable automated trading after setting custom parameters.", }, { question: "What brokerages does AI Trader support?", answer: "AI Trader integrates with all major US brokerages including Interactive Brokers, Charles Schwab, TD Ameritrade, Fidelity, E*TRADE, and more. We're adding international brokerages monthly.", }, { question: "How secure is my brokerage connection?", answer: "We use bank-level encryption (AES-256) and OAuth 2.0 authentication. We never store your passwords, only secure API tokens. All data is encrypted both in transit and at rest. We're SOC 2 Type II certified.", }, ].map((faq, i) => ( {faq.question} {faq.answer} ))}

{/* CTA Section */}

Start Trading Smarter Today

Join thousands of traders who are using AI to make smarter investment decisions and grow their wealth consistently. Start your free trial today—no credit card required.

14-day free trial. No credit card. Cancel anytime.

) }

About

Tags

Share

More from athaxv

More Templates Like This

About

Tags

Share

About

Tags

Share

More from athaxv

More Templates Like This